<template>
  <div class="login-btns row between">
    <div
      class="btn row"
      style="background: #00beff"
      @click="$router.push({ path: '/login/1' })"
    >
      <div class="row center">
        <i class="el-icon-guide font42"></i>
      </div>
      <div class="column title">
        <span class="font18">管理员登录</span>
        <span class="font12">点击登录</span>
      </div>
    </div>
    <div
      class="btn row"
      style="background: green"
      @click="$router.push({ path: '/login/2' })"
    >
      <div class="row center">
        <i class="el-icon-guide font42"></i>
      </div>
      <div class="column title">
        <span class="font18">校级管理员登录</span>
        <span class="font12">点击登录</span>
      </div>
    </div>
    <div
      class="btn row"
      style="background: #45d585"
      @click="$router.push({ path: '/login/3' })"
    >
      <div class="row center">
        <i class="el-icon-guide font42"></i>
      </div>
      <div class="column title">
        <span class="font18">院级管理员登录</span>
        <span class="font12">点击登录</span>
      </div>
    </div>
    <div
      class="btn row"
      style="background: #4c76ff"
      @click="$router.push({ path: '/login/4' })"
    >
      <div class="row center">
        <i class="el-icon-guide font42"></i>
      </div>
      <div class="column title">
        <span class="font18">学生登录</span>
        <span class="font12">点击登录</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "loginBtns",
  data() {
    return {};
  },
};
</script>

<style scoped>
.login-btns {
  margin-top: 14px;
}
.btn {
  color: #ffffff;
  width: 12vw;
  height: 50px;
  padding: 20px 15px 20px 15px;
  position: relative;
  transition: all 1s linear;
  cursor: pointer;
}
.btn i {
  margin-right: 5px;
}
.btn .title {
  justify-content: center;
}
</style>